<template>
  <div>
    <div id="menu">
      <h5 v-for="item in pages">
        <router-link :to="'/routerapi/page/'+item.id">{{ item.title }}</router-link>
      </h5>
      <h5>
        <hr>
      </h5>
      <h5>
        <router-link :to="{path:'/routerapi/article', query:{name:'abc','keyword':'hello'}}">article 1</router-link>
      </h5>
      <h5>
        <button @click="$router.push({path:'/routerapi/article', query:{name:'abc','keyword':'world'}})">article 2
        </button>
      </h5>
    </div>
    <div id="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "RouterApi",
  data() {
    return {
      pages: [
        {id: 1, title: '111'},
        {id: 2, title: '222'},
        {id: 3, title: '333'},
        {id: 4, title: '444'},
        {id: 5, title: '555'},
        {id: 6, title: '666'},
      ]
    }
  }
}
</script>

<style scoped lang="scss">
#menu {
  width: 30%;
  background: orangered;
  height: 300px;
  float: left;
}

#content {
  width: 70%;
  background: #cccccc;
  height: 300px;
  float: right;
}

a {
  font-weight: bold;
  color: #2c3e50;

  &.router-link-exact-active {
    color: #42b983;
  }
}
</style>
